<template>
  <van-row style="padding: 16px 20px;">
    <van-col span="4" style="display: flex; align-items: center;">
      <router-link to="javascript:void(0)" class="back-button" @click="$router.go(-1)">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#000000"/>
        </svg>
      </router-link>
    </van-col>

    <van-col span="16">
      <span style="font-size: 18px; font-weight: bold; display: block; text-align: center;">单词书</span>
    </van-col>
  </van-row>
  <div class="word-book-page">

      <div class="word-item" v-for="item in wordList" :key="item.id">
        <div class="word-info">
          <img :src="item.image" alt="" class="word-image">
          <div class="word-details">
            <div class="word-title">{{ item.name }}</div>
            <div class="word-label">共{{ item.num }}词</div>
            <van-button type="primary" size="small" @click="selectWordBook(item.id)">选择</van-button>
          </div>
        </div>
      </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import {get} from "../../util/request.js";

const searchText = ref(''); // 初始化加载状态为true，表示正在加载数据
const wordList = ref([]);

// 使用async函数来发起GET请求
const fetchWordBooks = async () => {
  try {
    const response = await get('home/wordBook/selectAllWordBook'); // 请替换为你的实际API端点// 数据加载完成后，设置加载状态为false
    wordList.value = response.data; // 假设API返回的是单词本列表
  } catch (error) {
    console.error('Error fetching word books:', error);
    loading.value = false;
  }
}
const selectWordBook = async (bookId) => {
  try {
    // 发起更新单词本的请求，注意这里的路径和参数应根据实际API调整
    await get(`home/wordBook/updateWordBook/${bookId}`);
    alert('选择成功')
    // 这里可以根据需要处理成功选择后的逻辑，比如提示用户已选择
  } catch (error) {
    console.error(`选择单词本ID ${bookId} 失败: `, error);
  }
};

// 在组件挂载时调用fetchWordBooks函数
onMounted(() => {
  fetchWordBooks();
});

// 原有的onLoad函数保持不变，用于模拟滚动加载更多数据，这里可以省略或根据实际需求调整
</script>

<style scoped>
.word-item {
  background-color: #fff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.word-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.word-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  margin-right: 16px;
}

.word-details {
  flex: 1;
}

.word-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
}

.word-label {
  font-size: 14px;
  color: #666;
}
</style>